import request from '@/plugins/request'
import store from './store'

export default {
  props: {
    // 组件数据模型
    dataModel: {
      type: Object,
      default: () => {
        return {
          attrs: {
            base: {},
            data: {},
            events: {},
            options: {}
          }
        }
      }
    },
    // 交互参数
    interactParams: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      loading: false,
      generateType: store.generateType,
      makingChart: store.makingChart,
      generateChart: store.generateChart
    }
  },

  inject: {
    // 页面所处环境 Generate、Making
    flag: { default: 'Making' },
    template: { default: false }
  },

  computed: {
    // 选中的组件，用于配置项数据的同步更改
    selectWidget: {
      get() {
        return this.makingChart.selectWidget
      },
      set(newValue) {
        this.makingChart.selectWidget = newValue
      }
    },
    // 组件属性
    selectWidgetAttrs: {
      get() {
        return this.selectWidget.attrs
      },
      set(newValue) {
        this.selectWidget.attrs = newValue
      }
    },
    // 组件属性-基本属性
    selectWidgetBase: {
      get() {
        return this.selectWidgetAttrs.base
      },
      set(newValue) {
        this.selectWidgetAttrs.base = newValue
      }
    },
    // 组件属性-数据源
    selectWidgetData: {
      get() {
        return this.selectWidgetAttrs.data
      },
      set(newValue) {
        this.selectWidgetAttrs.data = newValue
      }
    },
    // 组件属性，用于提供组件生成时的数据
    dataModelAttrs() {
      return this.dataModel.attrs
    },
    dataModelBase() {
      return this.dataModelAttrs.base
    },
    dataModelData() {
      return this.dataModelAttrs.data
    }
  },

  created() {
    this.getRemoteData()
  },

  methods: {
    // 动态请求
    async dynamicRequest(dataSource, params) {
      try {
        let data = {
          url: dataSource.url,
          method: dataSource.method
        }
        // #TODO 目前只有GET、POST两种请求
        if (dataSource.method === 'GET') {
          data.params = params || dataSource.params
        }
        if (dataSource.method === 'POST') {
          data.data = params || dataSource.params
        }

        const res = await request(data)
        return new Function('res', `${dataSource.responseFunc}`)(res)
      } catch (error) {
        return error
      }
    },

    // 动态源数据
    async httpRequest(params) {
      if (this.flag === 'Generate' && this.dataModelData.url) {
        try {
          this.loading = true
          return await this.dynamicRequest(this.dataModelData, params)
        } finally {
          this.loading = false
        }
      } else {
        throw '不满足请求条件'
      }
    },

    // 初始化发起请求
    getRemoteData() {
      if (
        this.flag === 'Generate' &&
        this.dataModelBase.remote &&
        this.dataModelData.auto &&
        this.dataModelData.url &&
        this.getData
      ) {
        this.$nextTick(() => {
          this.getData()
        })
      }
    }
  }
}
